Added summernote editor for post content
6 changed files with 38 additions and 5 deletions
+ 1
- 0
Gemfile
@@ -33,6 +33,7 @@ gem "therubyracer" |
||
| 33 | 33 |
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS |
| 34 | 34 |
gem "twitter-bootstrap-rails" |
| 35 | 35 |
gem 'flatstrap-rails' |
| 36 |
+gem 'font-awesome-rails' |
|
| 36 | 37 |
gem 'bootstrap-timepicker-rails' |
| 37 | 38 |
gem 'simple_form' |
| 38 | 39 |
gem 'friendly_id', '~> 5.0.0' |
+ 3
- 0
Gemfile.lock
@@ -49,6 +49,8 @@ GEM |
||
| 49 | 49 |
execjs (2.2.1) |
| 50 | 50 |
flatstrap-rails (0.3.0.2) |
| 51 | 51 |
twitter-bootstrap-rails (~> 2.2.6) |
| 52 |
+ font-awesome-rails (4.2.0.0) |
|
| 53 |
+ railties (>= 3.2, < 5.0) |
|
| 52 | 54 |
friendly_id (5.0.4) |
| 53 | 55 |
activerecord (>= 4.0.0) |
| 54 | 56 |
hike (1.2.3) |
@@ -148,6 +150,7 @@ DEPENDENCIES |
||
| 148 | 150 |
coffee-rails (~> 4.0.0) |
| 149 | 151 |
devise |
| 150 | 152 |
flatstrap-rails |
| 153 |
+ font-awesome-rails |
|
| 151 | 154 |
friendly_id (~> 5.0.0) |
| 152 | 155 |
jbuilder (~> 1.2) |
| 153 | 156 |
jquery-rails |
+ 1
- 0
app/assets/javascripts/application.js
@@ -13,5 +13,6 @@ |
||
| 13 | 13 |
//= require jquery |
| 14 | 14 |
//= require jquery_ujs |
| 15 | 15 |
//= require twitter/bootstrap |
| 16 |
+//= require summernote |
|
| 16 | 17 |
//= require turbolinks |
| 17 | 18 |
//= require_tree . |
+ 30
- 3
app/assets/javascripts/blog_posts.js.coffee
@@ -1,3 +1,30 @@ |
||
| 1 |
-# Place all the behaviors and hooks related to the matching controller here. |
|
| 2 |
-# All this logic will automatically be available in application.js. |
|
| 3 |
-# You can use CoffeeScript in this file: http://coffeescript.org/ |
|
| 1 |
+$ -> |
|
| 2 |
+ |
|
| 3 |
+ # to set summernote object |
|
| 4 |
+ # You should change '#post_content' to your textarea input id |
|
| 5 |
+ summer_note = $('#blog_post_content')
|
|
| 6 |
+ |
|
| 7 |
+ # to call summernote editor |
|
| 8 |
+ summer_note.summernote |
|
| 9 |
+ # to set options |
|
| 10 |
+ height:300 |
|
| 11 |
+ # toolbar: [ |
|
| 12 |
+ # ['insert', ['picture', 'link']], // no insert buttons |
|
| 13 |
+ # ["table", ["table"]], |
|
| 14 |
+ # ["style", ["style"]], |
|
| 15 |
+ # ["fontsize", ["fontsize"]], |
|
| 16 |
+ # ["color", ["color"]], |
|
| 17 |
+ # ["style", ["bold", "italic", "underline", "clear"]], |
|
| 18 |
+ # ["para", ["ul", "ol", "paragraph"]], |
|
| 19 |
+ # ["height", ["height"]], |
|
| 20 |
+ # ["help", ["help"]] |
|
| 21 |
+ #] |
|
| 22 |
+ |
|
| 23 |
+ # to set code for summernote |
|
| 24 |
+ summer_note.code summer_note.val() |
|
| 25 |
+ |
|
| 26 |
+ # to get code for summernote |
|
| 27 |
+ summer_note.closest('form').submit ->
|
|
| 28 |
+ # alert $('#post_content').code()[0]
|
|
| 29 |
+ summer_note.val summer_note.code()[0] |
|
| 30 |
+ true |
+ 2
- 0
app/assets/stylesheets/application.css
@@ -10,5 +10,7 @@ |
||
| 10 | 10 |
* |
| 11 | 11 |
*= require_self |
| 12 | 12 |
*= require flatstrap/bootstrap |
| 13 |
+ *= require font-awesome |
|
| 14 |
+ *= require summernote |
|
| 13 | 15 |
*= require_tree . |
| 14 | 16 |
*/ |
+ 1
- 2
app/views/blog_posts/_form.html.erb
@@ -4,9 +4,8 @@ |
||
| 4 | 4 |
<div class="form-inputs"> |
| 5 | 5 |
<%= f.input :title %> |
| 6 | 6 |
<%= f.input :slug %> |
| 7 |
- <%= f.input :content %> |
|
| 7 |
+ <%= f.input :content, class: 'summernote', id: 'post_content' %> |
|
| 8 | 8 |
<%= f.input :published %> |
| 9 |
- <%= f.association :author %> |
|
| 10 | 9 |
</div> |
| 11 | 10 |
|
| 12 | 11 |
<div class="form-actions"> |